<!-- 自定义公共组件: transfer
    author -- liulinfen
    @leftData 左侧数据
    @rightData 右侧数据
    @titles 数组数据,可以不设置，左右穿梭框的标题
    @sortType 上下排序的类型，可选值为： left、right、both三选一，可以不选，默认右侧可进行上下排序
 -->
<template>
  <div class="packaged_transfer">

    <div class="right_panel">
      <el-scrollbar style="height: 339px;">
        <div class="content-box">

          <!-- <el-radio-group v-model="right" class="packaged_transfer_checkbox" style="display: block;"> -->
            <li v-for="(item, index) in gainData" :key="item.id">
              <!-- <el-radio  :label="index" style="display: inline-block;">{{item.name}}</el-radio> -->
              <p style="display: inline-block;margin: 3px;">{{item.name}}</p>
              <el-button type="text" style="float: right;" @click="handleSort('up',index)" :disabled="index != 0">上移</el-button>
              <el-button type="text" style="float: right; margin-right: 5px;" @click="handleSort('down',index)" :disabled="index == gainData.length - 1">下移</el-button>
              <div style="clear: both;"></div>
            </li>

          <!-- </el-radio-group> -->
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      left: '',
      right: ''
    }
  },
  computed: {

  },
  props: ['leftData', 'gainData', 'titles', 'sortType'],
  methods: {
    // 排序的回调
    handleSort(type,val) {
      let data = ['', val];
      this.$emit('handleSort', type, this.sortType, data, this.handleNewSort);
    },
    handleNewSort(sortType, array) {
      console.log(array)
      if (!sortType || sortType == 'right') {
        this.right = array[1]
      } else if (sortType == 'left') {
        this.left = array[0];
      } else if (sortType == 'both') {
        this.left = array[0];
        this.right = array[1];
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  @import './index';
</style>
